<template>
  <div ref="chartDom"></div>
</template>

<script>
import echarts from "echarts";
import debounce from "lodash/debounce"; // 防抖函数
import { addListener, removeListener } from "resize-detector";// 监听窗口大小变化
export default {
  props:{
    option:{
      type: Object,
      default: ()=>{}
    }
  },
  name: "",
  data() {
    return {
      chart: null,
    };
  },
  components: {},
  computed: {},
  watch:{
    option: {   //深度监听对象里面的值变化，而重新渲染表格数据,但是数据多的时候耗性能，可以在传值的时候，每次让传入一次新值 this.chartOption = {...this.chartOption}
      handler(val) {
        this.chart.setOption(val);
      },
      deep: true
    }
  },
  methods: {
    renderChart() {
       this.chart = echarts.init(this.$refs.chartDom);
       this.chart.setOption(this.option)
    }
  },
  created() {},
  mounted() {
    this.renderChart();  // 初始化并渲染表格
    this.chart.resize = debounce(this.chart.resize, 300); // 在容器大小发生改变时，改变图表尺寸，加入防抖函数
    addListener(this.$refs.chartDom, this.chart.resize);  // 监听表格改变视图大小，调用改变图表尺寸方法
  },
  beforeDestroy() {
    removeListener(this.$refs.chartDom, this.chart.resize);
    this.chart.dispose();
    this.chart = null; // 关闭页面前销毁监听事件与对象
  },
};
</script>

<style lang="less" scoped>
</style>